//每页显示的商品数量
let size = 6

const app = new Vue({
    el: "#app1",
    data: {
        total: 0,
        products: [],
        search: '',         //搜索框中的 value
        post_search: '',     //点击搜索保存下来的value，翻页时使用的是该属性，为了翻页时不被search属性的变更影响，所以单独列出这个属性
        min: 1,
        max: 400,
        category: null
    },
    methods: {
        //模糊查询按钮点击事件
        clickSearch() {
            let that = this
            this.post_search = this.search;
            that.min = price_min
            that.max = price_max
            //单击查询后，初始化第一页
            axios.get(PATH + "/furniture/getAll", {
                //封装参数
                params: {
                    page: 1,
                    size: size,
                    post_search: this.post_search,
                    min: price_min,
                    max: price_max
                }
            })
                .then((resp) => {
                    that.products = resp.data.list
                    that.total = resp.data.total

                    //初始化page组件  放在回调函数里面的原因是为了先获取total后再渲染laypage中的count
                    layui.use('laypage', function () {
                        var laypage = layui.laypage;
                        laypage.render({
                            elem: 'test1'
                            , count: that.total //数据总数，从服务端得到
                            , limit: size
                            , jump: function (obj, first) {
                                axios.get(PATH + "/furniture/getAll", {
                                    params: {
                                        page: obj.curr,
                                        size: obj.limit,
                                        post_search: that.post_search,
                                        min: that.min,
                                        max: that.max
                                    }
                                })
                                    .then((resp) => {
                                        that.products = resp.data.list
                                        that.total = resp.data.total
                                        // console.log(this.products[0].furnitureName)
                                    })
                            }
                        });
                    });
                })


        }
    },

    created() {
        let that = this;
        //html页面加载后，初始化页面长度
        axios.get(PATH + "/furniture/getAll", {
            params: {page: 1, size: size, post_search: this.post_search}
        })
            .then((resp) => {
                that.total = resp.data.total
            })


        // 初始化页面上的类别列表
        axios.get(PATH + "/category/getAll")
            .then((resp) => {
                this.category = resp.data.data
            })




    },
    //vue初始化后，初始化分页插件
    mounted() {
        let that = this
        layui.use('laypage', function () {
            var laypage = layui.laypage;

            laypage.render({
                elem: 'test1'
                , count: that.total //数据总数，从服务端得到
                , limit: size
                , jump: function (obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    console.log(obj.limit); //得到每页显示的条数

                    axios.get(PATH + "/furniture/getAll", {
                        params: {page: obj.curr, size: obj.limit, post_search: that.post_search}
                    })
                        .then((resp) => {
                            that.products = resp.data.list
                            that.total = resp.data.total

                            laypage.render({
                                elem: 'test1'
                                , count: that.total //数据总数，从服务端得到
                                , limit: size
                                , jump: function (obj, first) {
                                    axios.get(PATH + "/furniture/getAll", {
                                        params: {
                                            page: obj.curr,
                                            size: obj.limit,
                                            post_search: that.post_search,
                                            min: that.min,
                                            max: that.max
                                        }
                                    })
                                        .then((resp) => {
                                            that.products = resp.data.list
                                            that.total = resp.data.total
                                            // console.log(this.products[0].furnitureName)
                                        })
                                }
                            });
                        })

                    //首次不执行
                    if (!first) {
                        //do something
                    }
                }
            });
        });



    }


})